import React from 'react'
import './index.less'
import { Icon, Input, Select, Row, Col, message } from 'antd'
import http from 'libs/http'
import { Dialog } from 'components'
import { AddAddressDialog, EditAddressDialog } from './components'

export default class Address extends React.Component {
  state = {
    showAddDialog: false,
    showEditDialog: false,
    addressList: [],
    editAddressData: {},
  }

  componentDidMount() {
    this.getAddressList()
  }

  // 获取收货地址列表
  getAddressList = () => {
    http.get('/student/student-address/list').then(res => {
      this.setState({ addressList: res.data })
    })
  }

  realodAddressList = () => {
    this.setState({ showAddDialog: false, showEditDialog: false }, this.getAddressList)
  }

  // 设为默认地址
  setDefaultAddress = id => () => {
    http.post('/student/student-address/setDefault', { id }).then(res => {
      this.getAddressList()
    })
  }

  // 删除地址
  deleteAddress = id => () => {
    Dialog({
      message: '地址已删除',
      cancelBtn: '取消',
      okCallback: () => {
        http.post('/student/student-address/delete', { id }).then(res => {
          message.success('删除成功！')
          this.getAddressList()
        })
      }
    })
  }

  // 新增地址
  addAddress = () => {
    this.setState({ showAddDialog: true })
  }

  // 修改地址
  editAddress = editAddressData => () => {
    this.setState({ editAddressData, showEditDialog: true })
  }

  closeDialog = () => {
    this.setState({ showAddDialog: false, showEditDialog: false, editAddressData: {} })
  }

  render() {
    const { showAddDialog, showEditDialog, addressList, editAddressData } = this.state
    const addressLen = addressList.length
    return (
      <div className="shipping-address">
        <div className="address-header">
          <p>您已创建 <span>{addressLen}</span> 个收货地址，最多可创建 <span>10</span> 个</p>
          <span onClick={this.addAddress} className="add-address-btn">新增收货地址</span>
        </div>
        <div className="address-wrap">
          {
            addressList.map((item, index) => {
              const {
                id,
                realName,
                isDefault,
                mobile,
                province,
                city,
                area,
                street,
                completeAddress, // 省市区街道
                address, // 详细地址
              } = item
              return (
                <div key={index} className={`address-item ${isDefault ? 'default' : ''}`}>
                  <div className="item-header">
                    <p><Icon type="user" /><span>{realName}</span></p>
                    {
                      isDefault ? 
                      <span>默认地址</span> :
                      <span className="hover-block" onClick={this.setDefaultAddress(id)}>设为默认地址</span>
                    }
                  </div>
                  <div className="item-content">
                    <p><Icon type="sync" />
                      <span>{completeAddress}</span>
                    </p>
                  </div>
                  <div className="item-footer">
                    <p><Icon type="mobile" /><span>{mobile}</span></p>
                    <div className="no-default-hover">
                      <span className="btn" onClick={this.editAddress(item)}>修改</span>
                      {
                        !isDefault && <span onClick={this.deleteAddress(id)} className="btn">删除</span>
                      }
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>

        <AddAddressDialog 
          showDialog={showAddDialog} 
          closeDialog={this.closeDialog}
          realodAddressList={this.realodAddressList}
        />

        <EditAddressDialog
          showDialog={showEditDialog} 
          closeDialog={this.closeDialog}
          realodAddressList={this.realodAddressList}
          editAddressData={editAddressData}
        />
      </div>
    )
  }
}